<template>
    <a-flex wrap="wrap" gap="small">
        <template v-for="item in colors">
            <a-tag :color="item.value" class="color-tag" @click="changeColor(item.value)">
              {{item.label}}
                <check-circle-outlined v-if="item.value === value" />
            </a-tag>
        </template>
    </a-flex>
</template>

<script lang="ts" setup>
import { CheckCircleOutlined } from '@ant-design/icons-vue';
const colors = [
    { value: 'default', label: '默认' }, // 默认
    { value: 'pink', label: '品红' },         // 品红
    { value: 'red', label: '红色' },             // 红色
    { value: 'orange', label: '橙色' },          // 橙色
    { value: 'green', label: '绿色' },           // 绿色
    { value: 'cyan', label: '青色' },            // 青色
    { value: 'blue', label: '蓝色' },            // 蓝色
    { value: 'geekblue', label: '极客蓝' },            // 蓝色
    { value: 'purple', label: '紫色' }           // 紫色
]
const value = defineModel<string>('value',{default:'default'})
const changeColor = (color: string) => {
    value.value = color
}
</script>

<style scoped>
.color-tag{
    margin: 0;
}
.color-tag:hover{
    cursor: pointer;
}
</style>